<template>
  <div class="step-bar">
    <div class="step-bar-main flex-box">
      <div>
        <p class="step-name">样本编号</p>
        <div class="step-line"><span v-bind:style="{ width: length + '%' }"></span></div>
        <p class="step"><span>0{{length/20}}</span>/05</p>
      </div>
    </div>
    <div class="form-banner">
      <p>全基因组基因检测-{{pType}}版</p>
      <img src="../assets/img/form-icona.png" alt="">
    </div>
  </div>
</template>
<script>
// @ is an alias to /src

export default {
  data() {
    return {
      list: "",
      pType: ""
    };
  },
  props: ["length"],
  name: "stepBar",
  computed: {},
  methods: {},
  mounted() {
    // console.log(window.ProductType);
    if (window.ProductType === 1) {
      this.pType = "儿童";
    } else if (window.ProductType === 2) {
      this.pType = "成人";
    }
  }
};
</script>
<style lang="scss" scoped>
.step-bar {
  max-width: 750px;
  height: r(148);
  margin: 0 auto;
  div.step-bar-main {
    height: r(72);
    padding-left: r(15);
    padding-right: r(15);
    box-sizing: border-box;
    background: #fff;
    width: 100%;
    .step-name {
      width: r(68);
      float: left;
      font-size: r(16);
      color: #717276;
      letter-spacing: 0;
      margin-right: r(10);
      margin-top: r(4);
    }
    .step-line {
      float: left;
      width: r(206);
      height: r(5);
      border-radius: 5px;
      background: #efedef;
      padding: 0;
      margin-right: r(10);
      margin-top: r(9);
      span {
        width: 20%;
        float: left;
        height: 100%;
        background: #53b4f9;
        border-radius: 5px;
      }
    }
    .step {
      float: left;
      font-size: 16px;
      color: #efedef;
      letter-spacing: 0;
      span {
        font-size: r(22);
        color: #53b4f9;
      }
    }
  }
  .form-banner {
    width: 100%;
    height: r(60);
    margin-top: r(16);
    background: -webkit-linear-gradient(left, #63c9ff, #70bfff);
    background: linear-gradient(to right, #63c9ff, #70bfff);
    p {
      font-size: r(18);
      color: #fff;
      line-height: r(60);
      letter-spacing: r(1.5);
      text-align: left;
      float: left;
      padding-left: r(15);
    }
    img {
      float: right;
      width: r(36);
      height: r(36);
      margin-top: r(12);
      margin-right: r(16);
    }
  }
}
</style>
